<template>
  <div id="index" ref="appRef">
    <div class="bg">
       <dv-loading v-if="loading">Loading...</dv-loading>
       <div v-else class="host-body">
         <div class="d-flex jc-center">
             <dv-decoration-10 class="dv-dec-10" />
              <div class="d-flex jc-center">
                 <dv-decoration-8 class="dv-dec-8" :color="['#568aea','#000000']"/>
                 <div class="title">
                    <span class="title-text">大数据可视化平台</span>
                    <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']"/>
                 </div>
                 <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="['#568aea','#000000']"/>
              </div>
              <dv-decoration-10 class="dv-dec-10-s" />
         </div>
          
          <div class="d-flex jc-between">
            <div class="d-flex aside-width">
              <div class="react-left ml-4 react-l-s">
                <span class="react-before"></span>
                <span class="text">数据分析1</span>
              </div>
              <div class="react-right ml-3">
                <span class="text">数据分析2</span>
              </div>
            </div>
            <div class="d-flex aside-width">
              <div class="react-right bg-color-blue mr-3">
                <span class="text fw-b">vue-big-screen</span>
              </div>
              <div class="react-right ml-3">
                <span class="react-after"></span>
                <span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
              </div>
            </div>
          </div>

          <div class="body-box">
             <div class="content-box">
                <div>
                  <dv-border-box-12>
                    <centerLeft1 />
                  </dv-border-box-12>
                </div>
                 <div>
                  <dv-border-box-12>
                    <centerLeft2 />
                  </dv-border-box-12>
                </div>
                <div>
                    <center />
                </div>
                 <div>
                    <centerRight2 />
                </div>
                <div>
                <div>
                  <dv-border-box-13>
                    <centerRight1 />
                  </dv-border-box-13>
                 </div>
            </div>
            
             </div>
                <div class="bototm-box">
                <dv-border-box-13>
                  <bottomLeft />
                </dv-border-box-13>
                <dv-border-box-12>
                  <bottomRight />
                </dv-border-box-12>
              </div>
          </div>
      </div> 
    </div>
  </div>
</template>

<script>
import drawMixin from '../utils/drawMixin.js'
import {formatTime} from '../utils/index.js'
import centerLeft1 from './centerLeft1'
import centerLeft2 from './centerLeft2'
import centerRight1 from './centerRight1'
import centerRight2 from './centerRight2'
import center from './center'
import bottomLeft from './bottomLeft'
import bottomRight from './bottomRight'
export default {
  mixins: [drawMixin],
  data () {
    return {
        timing: null,
        loading: true,
        dateDay: null,
        dateYear: null,
        dateWeek: null,
        weekday: ['周日','周一','周二','周三','周四','周五','周六']
    };
  },

  components: {
    centerLeft1,centerLeft2,centerRight1,centerRight2,center,bottomLeft,bottomRight
  },

  computed: {},

  mounted() {
      this.timeFn();
      this.cancelLoading();
  },

  methods: {
      timeFn() {
        this.timing = setInterval(()=>{
            this.dateDay = formatTime(new Date(),'HH:mm:ss');
            this.dateYear = formatTime(new Date(),'yyyy-MM-dd');
            this.dateWeek = this.weekday[new Date().getDay()]
        },1000)  
      },
      cancelLoading() {
          setTimeout(()=>{
              this.loading = false;
          },500)
      }
  }
}

</script>
<style lang='scss'>
#index {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #d3d6dd;
  transform-origin: left top;
  overflow: hidden;
  .bg {
    width: 100%;
    height: 100%;
    padding: 16px 16px 0 16px;
    background-image: url('../assets/images/pageBg.png');
  }
  .host-body {
    .dv-dec-10,
    .dv-dec-10-s {
      width: 33.3%;
      height: 5px;
    }
    .dv-dec-8 {
      width: 200px;
      height: 50px;
    }
    .dv-dec-10-s {
      transform: rotateX(180deg);
    }
    .title {
      position: relative;
      width: 500px;
      text-align: center;
      background-repeat: no-repeat;
      background-size: cover;

      .title-text {
        font-size: 24px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
      }
      .dv-dec-6 {
        position: absolute;
        left: 50%;
        bottom: -30px;
        transform: translateX(-50%);
        width: 250px;
        height: 8px;
      }
    }
    .aside-width {
      width: 40%;
    }
    .react-l-s .react-r-s {
      background-color: #0f1325;
    }

    .react-right {
      &.react-l-s {
        width: 500px;
        text-align: right;
      }
      font-size: 18px;
      width: 300px;
      line-height: 50px;
      text-align: center;
      transform: skewX(-45deg);
      .text {
         display: inline-block;
        transform: skewX(45deg);
      }
    }

    .react-left {
      &.react-l-s {
        width: 500px;
        text-align: left;
      }
      font-size: 18px;
      width: 300px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: #0f1325;
      transform: skewX(-45deg);
      .text {
        display: inline-block;
        transform: skewX(45deg);
      }
    }

     .body-box {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        .content-box {
          display: grid;
          grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
        }
  }

   // 底部数据
      .bototm-box {
        margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(2, 50%);
      }

  }
 
}
</style>